* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.list-item {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 16%;
    flex-shrink: 0;
    position: relative;
    text-align: center;
    margin: 20px;
    .close {
      position: absolute;
      right: 0;
      top: 0;
      display: none;
      z-index: 20;
      color: #fff;
    }

    .logo {
      border-radius: 50%;
    }

    .back {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      z-index: 10;
      left: 0;
      top: 0;
      background: rgba($color: #000000, $alpha: .6);
      color: #fff;
      display: none;
    }

    &.active {
      .close {
        display: block;
      }

      .back {
        display: flex;
      }
    }
  }

}